<template>
    <el-container style=" min-height: 100%;">
        <el-aside :width="sideWidth+'px'"
                  style="background-color: rgb(238, 241, 246);  height:100%;box-shadow:2px 0 6px rgb(0 21 41)">
            <Aside :isCollapse="isCollapse" :logTextShow="logTextShow" ></Aside>
        </el-aside>

        <el-container>
            <el-header style=" border-bottom:1px solid #ccc;">
                <Header :collapseBtnClass="collapseBtnClass" @asideCollapse="collapse" :user="user"></Header>
                <!--再把user传给Header组件-->
            </el-header>

            <el-main>
                <!--表示当前页面的子路由会在<router-view/>里面展示-->
                <router-view @refreshUser="getUser"/>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>

    // import request from "../utils/request";
    //通过this.request访问全局request然后就不用再在每个页面导入request了
    import Aside from "../components/Aside";
    import Header from "../components/Header";

    export default {
        name: 'Manage',
        data() {
            return {
                collapseBtnClass: 'el-icon-s-fold',
                isCollapse: false,
                sideWidth: 200,
                logTextShow: true,
                //getUser方法后user的数据就不是缓存中的数据了，而是从后台拿到的数据（被重新赋值了）
                /*user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}*/
                user: {}
            }

        },
        components: {
            Aside,
            Header,
        },
        created() {
            //一开始就从后台获取最新的数据
            this.getUser();
        },
        methods: {
            collapse() {//点击收缩按钮触发
                this.isCollapse = !this.isCollapse
                if (this.isCollapse) {//收缩
                    this.sideWidth = 64;
                    this.collapseBtnClass = 'el-icon-s-unfold';
                    this.logTextShow = false;
                } else {//展开
                    this.sideWidth = 200;
                    this.collapseBtnClass = 'el-icon-s-fold';
                    this.logTextShow = true;
                }
            },
            getUser() {
                //从浏览器的缓存中拿到username
                let username =localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")).username:"";//这样处理更柔和，不会报错
                //通过username从后台获取User数据
                this.request.get("/user/username/" + username).then(res => {
                    console.log(res)
                    //重新赋值后台的最新数据给user
                    this.user = res.data;
                    /*console.log(this.user.menus)*/
                });
            }
        }

    };
</script>


